<template>
     <ul>
        <li v-for="(l,i) in goods" :key='i'>
            <router-link :to="{name:'good',query:{id:l.id,name:l.name}}">
                <img :src="l.img" class="limg" alt="">
                <h3 class="name van-ellipsis"> {{l.name}}</h3>
                <p>
                    <span>{{l.price}}价格</span>
                    <span>{{l.type.text}}</span>
                </p>
            </router-link>
        </li>
    </ul>
</template>

<script>
export default {
    props:{
        goods:Array 
    }
}
</script>

<style lang="scss" scoped>
 ul{
    width:100%;
    padding:15px;
    li{
        margin-bottom:15px;
        box-shadow: 0 0 2px 0.5px  #b5b5b5;
        padding-bottom:15px;
        overflow: hidden;
        border-radius: 10px;
        a{
            text-decoration: none;
            
            img{
                width:100%;
                height:200px;
            }
            .name{
                width: 100%;
                padding:0 15px;
                font-size: 14px;
                color:#999;
                margin: 10px 0;
            }
            p{
                width: 100%;
                padding:0 15px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>